<template>
	<div class="loaders" v-show='loaderShow'>
		<div class="loader" id="loader"> 
		    <figure>
			    <div class="dot white"></div>
			    <div class="dot"></div>
			    <div class="dot"></div>
			    <div class="dot"></div>
			    <div class="dot"></div>
			</figure>
	    </div>
	</div>	
</template>

<style lang="less" scoped>
canvas {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}
.loaders {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1002;
    background-color: #fff;
}
.loader {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%,-50%,0);
	-moz-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 200px;
    height: 200px;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 100;
}
figure { 
    position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%,-50%,0);
	-moz-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
    width: 6.20em; 
    height: 6.20em;
    margin-left:-3.1em;
    margin-top:-10em;
    animation: rotate 1.3s linear infinite;
}
.white { 
  top: 0; bottom: 0; left: 0; right: 0; 
  background: white; 
  animation: flash 1.2s linear infinite;
  opacity: 0;
}
.dot {
  position: absolute;
  margin: auto;
  width: 2.4em; height: 2.4em;
  border-radius: 100%;
  transition: all .5s ease;
}
.dot:nth-child(2) { top: 0; bottom: 0; left: 0; background: #FF4444; animation: dotsY 2s linear infinite; }
.dot:nth-child(3) { left: 0; right: 0; top: 0; background: #FFBB33; animation: dotsX 2s linear infinite; }
.dot:nth-child(4) { top: 0; bottom: 0; right: 0; background: #99CC00; animation: dotsY 2s linear infinite; }
.dot:nth-child(5) { left: 0; right: 0; bottom: 0; background: #33B5E5; animation: dotsX 2s linear infinite; }

@keyframes rotate {
  0% { transform: rotate( 0 ); }
  100%{ transform: rotate(360deg); }
}

@keyframes dotsY {
  66% {  width: 2.4em; }
  77%{  width: 0; }
}
@keyframes dotsX {
  66% { height: 2.4em;}
  77%{  height: 0; }
}

@keyframes flash {
  33% {border-radius: 0%; }
  55%{  border-radius: 100%; }
  66%{ }
}
</style>
<script>
export default {
    components:{
        
    },	
    props:{
        loaderShow:{
            type:Boolean
        }
    },
    data: function () {
        return { 
        }
    },
    computed:{ 
    },	   
    created() {
    },
    mounted() {	
    
    },	  
    methods: {
    
    }		
}
</script>
